<template>
  <transition name="modal-fade">
    <div v-if="visible" class="custom-message-box-overlay" @click="handleOverlayClick">
      <div class="custom-message-box" @click.stop>
        <div class="message-box-header">
          <h3 class="message-box-title">{{ title }}</h3>
          <el-icon class="message-box-close" @click="close" v-if="showClose">
            <Close />
          </el-icon>
        </div>
        <div class="message-box-content">
          <div class="message-box-icon" v-if="type">
            <el-icon>
              <SuccessFilled v-if="type === 'success'" />
              <WarningFilled v-if="type === 'warning'" />
              <CircleCloseFilled v-if="type === 'error'" />
              <InfoFilled v-if="type === 'info'" />
            </el-icon>
          </div>
          <div class="message-box-text">{{ message }}</div>
        </div>
        <div class="message-box-footer">
          <el-button @click="close" v-if="showCancelButton" class="cancel-btn">
            {{ cancelButtonText }}
          </el-button>
          <el-button type="primary" @click="confirm" class="confirm-btn">
            {{ confirmButtonText }}
          </el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { SuccessFilled, WarningFilled, CircleCloseFilled, InfoFilled, Close } from '@element-plus/icons-vue'

const props = defineProps({
  message: {
    type: String,
    required: true
  },
  title: {
    type: String,
    default: '提示'
  },
  type: {
    type: String,
    default: 'info',
    validator: (value) => ['success', 'warning', 'error', 'info'].includes(value)
  },
  showCancelButton: {
    type: Boolean,
    default: false
  },
  showClose: {
    type: Boolean,
    default: true
  },
  confirmButtonText: {
    type: String,
    default: '确定'
  },
  cancelButtonText: {
    type: String,
    default: '取消'
  },
  closeOnClickModal: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['confirm', 'cancel', 'close'])

const visible = ref(false)

const close = () => {
  visible.value = false
  setTimeout(() => {
    emit('close')
  }, 300)
}

const confirm = () => {
  emit('confirm')
  close()
}

const cancel = () => {
  emit('cancel')
  close()
}

const handleOverlayClick = () => {
  if (props.closeOnClickModal) {
    close()
  }
}

onMounted(() => {
  visible.value = true
})
</script>

<style scoped>
.custom-message-box-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-message-box {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border: 1px solid #e1e5e9;
  min-width: 400px;
  max-width: 500px;
  overflow: hidden;
}

.message-box-header {
  padding: 20px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.message-box-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
}

.message-box-close {
  font-size: 18px;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.message-box-close:hover {
  color: #374151;
}

.message-box-content {
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.message-box-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.message-box-icon .el-icon {
  font-size: 24px;
}

.message-box-text {
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  flex: 1;
}

.message-box-footer {
  padding: 0 24px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cancel-btn:hover {
  background: #e5e7eb !important;
  border-color: #9ca3af !important;
}

.confirm-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.confirm-btn:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 不同类型的图标颜色 */
.message-box-icon .el-icon {
  color: #3b82f6;
}

.custom-message-box[data-type="success"] .message-box-icon .el-icon {
  color: #10b981;
}

.custom-message-box[data-type="warning"] .message-box-icon .el-icon {
  color: #f59e0b;
}

.custom-message-box[data-type="error"] .message-box-icon .el-icon {
  color: #ef4444;
}

/* 动画效果 */
.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-fade-enter-from,
.modal-fade-leave-to {
  opacity: 0;
}

.modal-fade-enter-from .custom-message-box,
.modal-fade-leave-to .custom-message-box {
  transform: scale(0.9) translateY(-20px);
}
</style>